<template>
  <div class="app-container">
    <!-- 搜索条件 -->
    <div class="filter-container" style="margin-bottom: 10px; margin-top: -10px">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;margin-right: 10px"
      class="filter-item" placeholder="标题" v-model="listQuery.title">
      </el-input>
          <el-input @keyup.enter.native="handleFilter" style="width: 200px;margin-right: 20px"
      class="filter-item" placeholder="分类" v-model="listQuery.title">
      </el-input>
      <el-button class="filter-item" type="primary" @click="handleFilter" >搜索</el-button>
      <el-button class="filter-item" type="primary" @click="handleCreate" >添加</el-button>
    </div>

    <!-- 表格 -->
    <el-table ref="multipleTable" @selection-change="handleSelectionChange" :data="goodsList" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row style="width: 100%" >
            <el-table-column label="图标" width="60px" align="center">
            <template scope="scope">
                <a target="_blank" :href="scope.row.thumbUrl" class="" style="text-align: center;display: inline-block;">
                    <img :src="scope.row.thumbUrl" alt="" style="text-align: center; width:100%; padding-left:-20px;">
                </a>
            </template>
          </el-table-column>

          <el-table-column label="名称" width="130px;" prop="title">
            <template scope="scope">
              {{ scope.row.title }}
            </template>
          </el-table-column>

          <el-table-column label="登录状态提示" width="100px;" prop="classname">
            <template scope="scope">
              {{ scope.row.classname }}
            </template>
          </el-table-column>

          <el-table-column label="游客状态提示" width="80px" >
            <template scope="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>

          <el-table-column label="响应类型" width="95" prop="isValid">
             <template  scope="scope">
              <el-button
                size="small"
                :type="scope.row.isValid == 0?'danger':'info'"
                @click="updateStatus(scope.$index, scope.row)">{{scope.row.isValid == 0?'已下线':'已上线'}}</el-button>
            </template>
            </el-table-column>

         <el-table-column label="跳转链接" width="80px">
            <template scope="scope">
              <span>{{scope.row.buyNumMax}}</span>
            </template>
          </el-table-column>

          <el-table-column label="登录状态角标" width="80px" >
            <template scope="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>

         <el-table-column label="游客状态角标" width="80px" >
            <template scope="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>

         <el-table-column label="显示角标" width="80px" >
            <template scope="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>

          <el-table-column label="友盟ID" width="80px">
            <template scope="scope">
              <span>{{scope.row.buyNumMax}}</span>
            </template>
          </el-table-column>
          <el-table-column label="IOS审核显示" width="80px" >
            <template scope="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column label="开始版本" width="80px" >
            <template scope="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column label="结束版本" width="80px" >
            <template scope="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>

          <el-table-column label="当前状态" width="95" prop="isValid">
             <template  scope="scope">
              <el-button
                size="small"
                :type="scope.row.isValid == 0?'danger':'info'"
                @click="updateStatus(scope.$index, scope.row)">{{scope.row.isValid == 0?'已下线':'已上线'}}</el-button>
            </template>
            </el-table-column>

            <el-table-column label="操作"  width="165">
                <template scope="scope">
                    <el-button
                    size="small"
                    :type="scope.row.isValid == 0?'danger':'info'"
                    @click="handleEdit(scope.$index, scope.row)">{{scope.row.isValid == 0?'上架':'下架'}}</el-button>
                    <el-button
                    size="small"
                    type="success"
                    @click="handleEdit(scope.$index, scope.row)">查看编辑</el-button>
                </template>
            </el-table-column>

          <el-table-column align="center" prop="createTime" label="创建时间" width="165"   >
            <template scope="scope">
              <span>{{new Date(scope.row.createTime).Format('yyyy-MM-dd hh:mm:ss')}}</span>
            </template>
          </el-table-column>

            <el-table-column align="center" prop="updateTime" label="创建时间" width="165"   >
            <template scope="scope">
              <span>{{new Date(scope.row.updateTime).Format('yyyy-MM-dd hh:mm:ss')}}</span>
            </template>
          </el-table-column>

    </el-table>
    <!-- 分页 -->
    <div v-show="!listLoading" class="pagination-container" style="margin-top: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.currPage"
                      :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>

  import {getGoods,updateStatus,deleteGoods} from '@/api/goods/goods';

  export default {
    data() {
      return {
        goodsList: null,//表格list [].push({})
        total: null,
        listLoading: false,
        listQuery: {
          currPage: 1,
          pageSize: 10,
          title: '',
          type: null,//类型
        },
        dialogFormVisible: false,
        multipleSelection: []
      }
    },
    mounted() {
      let vm = this;
      // vm.getList();
    },
    methods: {
      initTemp(){
        let vm = this;

        vm.temp = {
          "chnlId": "",
          "hisChnlId": "",
          "chnlName": "",
          "state": "",
          "isavailable": "",
          "orderNum": 10
        }
      },
      //获取列表数据
      getList() {

        let vm = this;
        vm.listLoading = true;

        let param = vm.listQuery;
        getGoods(param.currPage,param.pageSize)
          .then(response => {
            // console.log('-------获取到数据：',JSON.stringify(response.data) )
            let data = response.data.goodsList;
            if (response.code === 1000){
              vm.goodsList = data;
              vm.listLoading = false;
              vm.total = response.data.total;
            }
          })

      },
      //编辑
      handleEdit(index,row){
        let vm = this;
        //跳页面进行修改
        var goods = vm.goodsList[index];
        console.log('编辑的row：',index,'-----',goods);

        window.localStorage.setItem("goods",JSON.stringify(goods))
        this.$router.push( { path: '/goods/addGoods'} ); //带参跳转
      },
      //单个删除
      handleDelete(index,row){
        var goods = this.goodsList[index];
         deleteGoods(goods.goodsId)
          .then(response => {
            // console.log('-------获取到数据：',JSON.stringify(response.data) )
            if (response.code === 1000){
                this.getList();
            }
          })
      },
      //批量删除
      handleDelAll(){
        let vm = this;
        console.log('批量删除选择的row：',vm.multipleSelection)
      },
      //搜索
      handleFilter() {
        this.getList();
      },
      //操作分页
      handleSizeChange(val) {
        this.listQuery.pageSize = val;
        this.getList();
      },
      //操作分页
      handleCurrentChange(val) {
        console.log('--------',val)
        this.listQuery.currPage = val;
        this.getList();
      },
      //新增
      handleCreate() {
        this.$router.push( { path: '/goods/addGoods'} ); //带参跳转
      },
      //新增提交
      handleCreateSubmit(){
        let vm = this;
        console.log('新增入参：',vm.temp)

        //这里作演示用，正式新增 请提交到接口
        vm.list.push(vm.temp)
        console.log('新增后',vm.list)

        this.dialogFormVisible = false;
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleClick() {
        let vm = this;
      },
      updateStatus(index,row) {
        let vm = this;
        var goods = vm.goodsList[index];
         updateStatus(goods.goodsId)
          .then(response => {
            console.log('-------获取到数据：',JSON.stringify(response.data) )
            if (response.code === 1000){
                this.getList();
            }
          })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      }
    }
  };
</script>
